<template>
	<view :class='padding ? "panel-page-padding-top bg-white" : "panel-page bg-white"'>
		<component :is="component" :external_data="internal_data"></component>
	</view>
</template>

<script>
	import profile_show from './profile_show.vue';
	import edu_show from './edu_show.vue';
	import project_show from './project_show.vue'
	import award_show from './award_show.vue';
	import memo_show from './memo_show.vue';
	export default {
		components: {profile_show, project_show, award_show, edu_show, memo_show},
		data() {
			return {
				internal_data: []
			}
		},
		props: {
			component: {
				required: true
			},
			data: {
				required: true
			},
			padding: {
				default: false
			}
		},
		watch: {
			data: {
				handler(val, oldVal){
					this.internal_data = val;
				},
				deep:true
			}
		}
	}
</script>

<style>
	.panel-page {
		padding: 0px 5px;
		margin: 0 5px;
	}
	
	.panel-page-padding-top {
		padding: 0px 5px;
		margin: 0 5px;
		padding-top: 10px;
	}
	
	.panel-page-padding-bottom {
		padding: 0px 5px;
		margin: 0 5px;
		padding-top: 10px;
	}
</style>
